<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户管理</title>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/userManage.css">
</head>
<th:block th:include="~{IncludePage}"></th:block>

<!--    用户筛选-->
    <div class="user-screen">
        <div class="status-comboBox">
            <select name="" class="comboBox" id="status-comboBox" >
                <option id="all-user" selected = selected>全部</option>
                <option id="user-status">用户</option>
                <option id="manager-status">管理员</option>
            </select>
        </div>
        <div class="screen-btns">
            <button class="btn screen-btn gray" id="btn-new">新增</button>
            <button class="btn screen-btn gray" id="btn-reset">重置</button>
        </div>
        <div class="username-search">
            <input type="text" class="search-input" id="username-search-input" placeholder="请输入用户名">
            <button class="btn search-btn" id="username-search-btn">搜索</button>
        </div>
        <div class="studentId-search">
            <input type="text" class="search-input" id="userId-search-input" placeholder="请输入用户ID">
            <button class="btn search-btn" id="studentId-search-btn" >搜索</button>
        </div>
    </div>

<!--    添加用户-->
    <form class="add-user" id="add-user-form" action="addUser" method="post">
        <div class="user-add-item">
            <label class="add-title">编号</label>
            <input type="text" class="add-input" name="id" id="add-id" placeholder="用户编号">
        </div>
        <div class="user-add-item">
            <label class="add-title">用户名</label>
            <input type="text" class="add-input" name="username" id="add-username" placeholder="请输入用户名">
        </div>
        <div class="user-add-item">
            <label class="add-title">密码</label>
            <input type="text" class="add-input" name="password" id="add-password" placeholder="请输入密码">
        </div>
        <div class="user-add-item">
            <label class="add-title">邮箱</label>
            <input type="text" class="add-input" name="email" id="add-email" placeholder="请输入邮箱">
        </div>
        <div class="user-add-item">
            <label class="add-title">年龄</label>
            <input type="text" class="add-input" name="age" placeholder="请输入年龄" id="add-age" pattern="[0-9]+" required>
        </div>
        <div class="user-add-item">
            <label class="add-title">身份</label>
            <input type="radio" value="0" name="isAdmin" id="add-status-user" class="add-radio">用户
            <input type="radio" value="1" name="isAdmin" id="add-status-manager" class="add-radio">管理员
        </div>
        <div class="user-add-buttons">
            <button class="btn add-user-btn gray" id="confirm-add-btn" type="submit">确认添加</button>
            <button class="btn add-user-btn gray" id="close-add-form-btn">关闭</button>
        </div>
    </form>

<!--    编辑用户-->
    <form class="edit-user" id="edit-user-form" action="editUser" method="post">
        <div class="user-edit-item">
            <label class="edit-title">编号</label>
            <input type="text" class="edit-input" id="edit-userId" name="id" placeholder="用户ID">
        </div>
        <div class="user-edit-item">
            <label class="edit-title">用户名</label>
            <input type="text" class="edit-input" id="edit-username" name="username" placeholder="请输入用户名">
        </div>
        <div class="user-edit-item">
            <label class="edit-title">密码</label>
            <input type="text" class="edit-input" id="edit-password" name="password" placeholder="请输入密码">
        </div>
        <div class="user-edit-item">
            <label class="edit-title">邮箱</label>
            <input type="text" class="edit-input" id="edit-email" name="email" placeholder="请输入邮箱">
        </div>
        <div class="user-edit-item">
            <label class="edit-title">年龄</label>
            <input type="text" class="edit-input" id="edit-age" name="age" placeholder="请输入年龄">
        </div>
        <div class="user-edit-item">
            <label class="edit-title">身份</label>
            <input type="radio" class="edit-radio" id="edit-user-radio" name="isAdmin" value="0">用户
            <input type="radio" class="edit-radio" id="edit-manager-radio" name="isAdmin" value="1">管理员
        </div>
        <div class="user-edit-buttons">
            <button class="btn edit-user-btn gray" id="confirm-edit-btn" type="submit">确认修改</button>
            <button class="btn edit-user-btn gray" id="close-edit-form-btn">关闭</button>
        </div>
    </form>

<!--    用户详情-->
    <div class="info-user" id="info-user-form">
        <div class="user-info-item">
            <div class="info-title"><label>用户名</label></div>
            <input type="text" class="info-input" id="username-info" th:value="${session.account.getUsername()}" placeholder="用户名" readonly>
        </div>
        <div class="user-info-item">
            <div class="info-title"><label>邮箱</label></div>
            <input type="text" class="info-input" id="email-info" th:value="${session.account.getEmail()}" placeholder="邮箱" readonly>
        </div>
        <div class="user-info-item">
            <div class="info-title"><label>名</label></div>
            <input type="text" class="info-input" id="firstname-info" th:value="${session.account.getFirstName()}" placeholder="名" readonly>
        </div>
        <div class="user-info-item">
            <div class="info-title"><label>姓</label></div>
            <input type="text" class="info-input" id="lastname-info" th:value="${session.account.getLastName()}" placeholder="姓" readonly>
        </div>
        <div class="user-info-item">
            <div class="info-title"><label>账号状态</label></div>
            <input type="text" class="info-input" id="status-info" th:value="${session.account.getStatus()}" placeholder="账号状态" readonly>
        </div>
        <div class="user-info-item">
            <div class="info-title"><label>地址1</label></div>
            <input type="text" class="info-input" id="address1-info" th:value="${session.account.getAddress1()}" placeholder="地址1" readonly>
        </div>
        <div class="user-info-item">
            <div class="info-title"><label>地址2</label></div>
            <input type="text" class="info-input" id="address2-info" th:value="${session.account.getAddress2()}" placeholder="地址2" readonly>
        </div>
        <div class="user-info-item">
            <div class="info-title"><label>城市</label></div>
            <input type="text" class="info-input" id="city-info" th:value="${session.account.getCity()}" placeholder="城市" readonly>
        </div>
        <div class="user-info-item">
            <div class="info-title"><label>所属洲</label></div>
            <input type="text" class="info-input" id="state-info" th:value="${session.account.getState()}" placeholder="所属洲" readonly>
        </div>
        <div class="user-info-item">
            <div class="info-title"><label>国家</label></div>
            <input type="text" class="info-input" id="country-info" th:value="${session.account.getCountry()}" placeholder="国家" readonly>
        </div>
        <div class="user-info-item">
            <div class="info-title"><label>邮政编码</label></div>
            <input type="text" class="info-input" id="zip-info" th:value="${session.account.getZip()}" placeholder="邮政编码" readonly>
        </div>
        <div class="user-info-item">
            <div class="info-title"><label>电话号码</label></div>
            <input type="text" class="info-input" id="phone-info" th:value="${session.account.getPhone()}" placeholder="电话号码" readonly>
        </div>
        <div class="user-info-buttons">
            <button class="btn info-user-btn gray" id="edit-info-btn">编辑</button>
            <button class="btn info-user-btn gray disable" id="confirm-info-btn">保存</button>
            <button class="btn info-user-btn gray" id="close-info-form-btn">关闭</button>
        </div>

    </div>


<!--    用户表单-->
    <div class="user-table">
        <table class="table" id="user-table">
            <tr class="table-title">
                <th class="col1">编号</th>
                <th class="col2">用户名</th>
                <th class="col3">密码</th>
                <th class="col4">邮箱</th>
                <th class="col5">年龄</th>
                <th class="col6">身份</th>
                <th class="col7">操作</th>
            </tr>
            <tr id="table-item" class="user-data" th:each="user:${session.userList}">
                <td th:text="${user.getId()}"></td>
                <td th:text="${user.getUsername()}"></td>
                <td th:text="${user.getPassword()}"></td>
                <td th:text="${user.getEmail()}"></td>
                <td th:text="${user.getAge()}"></td>
                <td th:text="${user.getIsAdmin()==1?'管理员':'用户'}"></td>
                <td class="btns-action">
                    <button class="action-btn" id="edit-user-btn">编辑</button>
                    <a th:href="@{/deleteUser(userId=${user.getId()})}"><button class="action-btn" id="delete-user-btn">删除</button></a>
<!--                    <a th:href="@{/userinfo(username=${user.getUsername()})}"><button class="action-btn" id="user-info-btn">详情</button></a>-->
                    <button class="action-btn" id="user-info-btn" th:value="${user.getUsername()}">详情</button>
                </td>
            </tr>
        </table>

        <div class="nav-bottom">
            <p class="total">共1条</p>
            <a href="#" class="link">上一页</a>
            <p class="current-page">第1页</p>
            <a href="#" class="link">下一页</a>
            <p>跳转到第</p>
            <input type="text" class="target-page">
            <p>页</p>
        </div>
    </div>




    </div>

</body>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src="js/includePage.js"></script>
<script src="js/userManage.js"></script>
</html>